<!-- 
  1 快速实现静态布局
  2 使用提供好的数组数据 来遍历 渲染页面
 -->
<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>01-捐赠管理.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      h3 {
        margin: 50px;
        text-align: center;
      }

      div {
        width: 914.17px;
        margin: 0px auto;
        border: 1px solid blue;
        display: flex;
        justify-content: space-around;
        padding: 5px 0;
      }

      table {
        width: 800px;
        margin: 0 auto;
        border-collapse: collapse;
        text-align: center;
      }

      thead {
        background-color: #337ab7;
        color: #fff;
      }

      td,
      th {
        padding: 10px 50px;
        /* 设置文字不换行 */
        white-space: nowrap;
      }
    </style>
  </head>

  <body>
    <h3>捐赠管理</h3>
    <div>
      <!-- 关闭输入框的历史输入 -->
      <form autocomplete="off">
        <label for="">捐赠人</label>
        <input type="text" id="username" />

        <label for="for">受捐单位</label>
        <select id="unit">
          <option value="腾讯">腾讯</option>
          <option value="阿里">阿里</option>
          <option value="百度">百度</option>
          <option value="谷歌">谷歌</option>
        </select>

        <label for="">金额</label>
        <input type="text" id="money" />

        <label for="">日期</label>
        <input type="date" id="date" />

        <button>新增</button>
      </form>
    </div>
    <table border="1">
      <thead>
        <tr>
          <th>序号</th>
          <th>捐赠人</th>
          <th>收捐单位</th>
          <th>金额</th>
          <th>收捐日期</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>3</td>
          <td>李连杰</td>
          <td>嫣然基金</td>
          <td>1000</td>
          <td>2021-06-7</td>
          <td>
            <a href="#" class="del">删</a>
            <a href="#" class="update">改</a>
          </td>
        </tr>
      </tbody>
    </table>
    <script>
      // 获取元素
      const btn = document.querySelector("button");
      const inps = document.querySelectorAll("input");
      const select = document.querySelector("#unit");
      const tbody = document.querySelector("tbody");
      // 数据数组
      let data = JSON.parse(localStorage.getItem("data")) || [];

      // 渲染函数
      function render(data) {
        const list = data.map((item, index) => {
          return `<tr >
        <td>${index + 1}</td>
        <td>${item.username}</td>
        <td>${item.unit}</td>
        <td>${item.money}</td>
        <td>${item.date}</td>
        <td>
          <a href="#" class="del" data-id="${index}">删</a>
          <a href="#" class="update" data-id="${index}">改</a>
        </td>
      </tr>`;
        });
        tbody.innerHTML = list.join("");
      }
      render(data);

      // 1、添加信息业务
      btn.addEventListener("click", (e) => {
        e.preventDefault();
        // 业务代码
        // 1、创建一个对象，保存数据
        let item = {
          id: 1,
          username: inps[0].value,
          unit: select.value,
          money: inps[1].value,
          date: inps[2].value,
        };
        if (inps[0].value && select.value && inps[1].value && inps[2].value) {
          data.push(item);
          // 渲染函数
          render(data);
          localStorage.setItem("data", JSON.stringify(data));
        } else {
          alert("请填写完整信息");
        }
      });
      //  2、删除修改业务
      tbody.addEventListener("click", (e) => {
        // e.preventDefault();
        if (e.target.className === "del") {
          console.log(e.target.className);
          data.splice(e.target.dataset.id, 1);
          render(data);
          localStorage.setItem("data", JSON.stringify(data));
        } else if (e.target.className === "update") {
          // console.log(e.target.className);
          // 把信息显示到thead
          // let item = data[e.target.dataset.id];
        }
      });
    </script>
  </body>
</html>
